<template>
  <h1>person: {{ person }}</h1>
  <h1 v-show="name">姓名:{{ name }}</h1>
  <br />
  <h1 v-show="age">年龄:{{ age }}</h1>
  <br />
  <h1 v-show="job.salary">薪资:{{ job.salary }}K</h1>
  <br />
  <button @click="name += '~'">姓名修改</button>
  <button @click="age++">年龄增加</button>
  <button @click="job.salary++">薪资++</button>
</template>

<script>
import { reactive, toRef, toRefs } from "vue";
export default {
  name: "Demo",
  setup() {
    // 数据
    let person = reactive({
      name: "Shier",
      age: 19,
      job: {
        job1: "全栈",
        salary: 88,
      },
    });

    // 返回一个对象（常用）
    return {
      person,
      // toRef写法 第一个参数为数据对象，第二个参数为数据对象的属性
      // name: toRef(person, 'name'),
      // salary: toRef(person.job, 'salary'),
      // toRefs写法 将person中多个属性返回给模板使用
      ...toRefs(person)
    };
  },
};
</script>

<style>
</style>
